<template>
  <div id="main"></div>
</template>

<script lang='ts' setup>
import {onMounted,ref} from 'vue';
import * as echarts from 'echarts';

import {useCommon} from '@/hooks/web/useCommon'

type EChartsOption = echarts.EChartsOption;
var option: EChartsOption;
const {throttle, createFigure, chartRef} = useCommon()
onMounted(() => {
  chartRef.value = 'main'
  window.addEventListener("resize", throttle(createFigure, 500));
})

const getChartsData = () => {
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom, 'light');
  var option: EChartsOption;

  option = {
    title: {
      text: '学生报名来源',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },

    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '人数',
        type: 'pie',
        radius: '50%',
        center: ['50%', '65%'],
        label: {
          show: true,
          position: 'outside',
          formatter: '{a|{b}：{d}%}\n{hr|}',
          rich: {
            hr: {
              backgroundColor: 't',
              borderRadius: 3,
            },
          }
        },
        data: [
          {value: 1048, name: '百度搜索'},
          {value: 735, name: '微信公众号'},
          {value: 580, name: '渠道'},
          {value: 484, name: '学生推荐'},

        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },

    ],

  };

  option && myChart.setOption(option);
}

defineExpose({getChartsData})


</script>
<style scoped>
#main {
  width: 100%;
  height: 300px;
}
</style>